<template>
	<view class="myWallet">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="myWallet-box">
			<view class="myWallet-main">
				<view class="myWallet-num-content">
					<image class="wallet-bg" src="../../static/img/wallet-bg.png" mode=""></image>
					<view class="_num-content">
						<view class="_num-content-title"><text>我的余额</text></view>
						<view class="_num-content-data"><text v-if="userInfo">{{userInfo.balance?userInfo.balance:0}}</text></view>
					</view>
				</view>
				
				<view class="wallet-withdrawal" @click="toLink('/pages/withdrawalPage/withdrawalPage')"><text>提现</text></view>
				<view class="wallet-tips" @click="toLink('/pages/takeRecord/takeRecord')"><text>提现记录</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'余额',
				userInfo:null,
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo') || null;
		},
		onShow() {
			this.getUserInfo()
		},
		methods:{
			toLink(link) {
				if (link) {
					uni.navigateTo({
						url:link
					})
				}
			},
			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.userInfo = res.data;
						uni.setStorageSync('userInfo',res.data)
					} else {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.myWallet{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.myWallet-box{
			padding: 0 48rpx;
			box-sizing: border-box;
			.myWallet-main{
				width: 100%;
				.myWallet-num-content{
					width: 100%;
					height: 238rpx;
					background: #262A34;
					border-radius: 24rpx;
					position: relative;
					overflow: hidden;
					margin-top: 84rpx;
					.wallet-bg{
						width: 100%;
						height: 100%;
					}
					._num-content{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						padding: 52rpx 0 0 64rpx;
						box-sizing: border-box;
						._num-content-title{
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
						._num-content-data{
							font-size: 56rpx;
							font-weight: 600;
							color: #FFFFFF;
							line-height: 96rpx;
						}
					}
				}
				.wallet-withdrawal{
					width: 100%;
					height: 88rpx;
					background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
					border-radius: 45rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
					margin-top: 96rpx;
				}
				
				.wallet-tips{
					font-size: 28rpx;
					font-weight: 400;
					color: #5E6272;
					text-align: center;
					margin-top: 48rpx;
				}
			}
		}
	}
</style>
